<template>
    <div class="test-root">
        <div style="font-size: 20px;font-weight: bold;margin-bottom: 34px;">{{ zuanjiauten.name }}</div>
        <img style="width: 50%;" :src="zuanjiauten.img" alt="">
        <van-button class="smit" @click="saveimg">保存到相册</van-button>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import image1 from '@/assets/images/1_2.png';
import image2 from '@/assets/images/2_2.png';

const route = useRoute();

const column = ref<any[]>([
    {
        name: '毛晶晶',
        img: image1,
        type: 0,
    },
    {
        name: '范丽文',
        img: image2,
        type: 1,
    },
])

const zuanjiauten = ref<any>({})

const saveimg = async () =>{
    try {
        // 发起请求获取图片数据
        const response = await fetch(zuanjiauten.value.img);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 创建 Blob 对象
        const blob = await response.blob();

        // 创建 URL 对象
        const url = window.URL.createObjectURL(blob);

        // 创建 a 标签
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'qywx'); // 设置下载文件名
        link.style.display = 'none';

        // 添加到 DOM 并触发点击
        document.body.appendChild(link);
        link.click();

        // 清理
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('Error downloading image:', error);
      }
}

onMounted(() => {
    console.log(route.params.id)
    zuanjiauten.value = column.value[Number(route.params.id)]
});

</script>

<style lang="scss" scoped>
.test-root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 24px;
}

.smit {
    width: 55%;
    height: 80px;
    font-size: 30px;
    color: white;
    background: #B59474;
    margin-top: 60px;
}
</style>